import type { GreasyForkElements } from '../../../../../../../../types/constants/personalization/greasy_fork'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { ScriptProcessor } from '../module/script_processor'

export class ScriptListPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private static instance: ScriptListPage
  private scriptProcessor: ScriptProcessor = ScriptProcessor.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): ScriptListPage {
    if (!ScriptListPage.instance) {
      ScriptListPage.instance = new ScriptListPage()
    }
    return ScriptListPage.instance
  }

  init(): void {}

  getMainStyles(): string {
    const { HEADER_CONTAINER, TITLE_CONTAINER } = this.elements

    return `
/* 页眉 */    
${HEADER_CONTAINER.selector} {
  background-color: #670000 !important;
  background-image: linear-gradient(#670000, #900) !important;
  box-shadow: 0 0 15px 2px #00000080 !important;
  padding: .25em 0 !important;
}

/* 内容区域*/
.sidebarred {
  background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
}

/* 标题区域 */
${TITLE_CONTAINER.selector} {
  /* 标题 */ 
  a {
    color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
    text-decoration: none !important;
  }
  
  /* 描述 */
  .description {
    color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
  }
}
`
  }

  getPatchedStyles(): string {
    const { CONTENT_CONTAINER, RESULT_CONTAINER, HEADER_CONTAINER } = this.elements
    return `
${CONTENT_CONTAINER?.selector} {
  width: ${AppStyleCollections.Module.SCRIPT_NAVIGATOR.width} !important;
  max-width: ${AppStyleCollections.Module.SCRIPT_NAVIGATOR.width} !important;
}   

${RESULT_CONTAINER?.selector} {
  border: none !important;
  box-shadow: none !important;
}

/* 隐藏页眉 */
${HEADER_CONTAINER?.selector} {
  display: none !important;
}

${this.scriptProcessor.styles()}
`
  }
}
